<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">



</head>
<body>

<jsp:include page="${APP_PATH}/common/head-home.jsp"/>

<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="bg-white rounded my-2 p-4">
        <div class="border-bottom border-dark mb-2"><h4>搜索文章和问题</h4></div>
        <div class="d-inline">
            <input type="search" maxlength="10" id="key" name="key" placeholder="请输入关键字开始搜索" class="form-control d-inline col-8">
            <a id="searchBtn" class="ml-2 btn bg-primary text-white d-inline"><i class="fa fa-search"></i>搜索</a>
        </div>
    </div>
    <div class="rounded my-2">
        <div id="card-columns" class="card-columns">

        </div>
    </div>
</div>


<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    $("#searchBtn").click(function () {
        var key = $("#key").val();
        if (key) {
            $.ajax({
                url:'/search',
                type:'POST',
                data:{key:key},
                success:function (result) {
                    $("#card-columns").empty();
                    console.log(result);
                    if (result.code === 100) {
                        if (result.extend.list.length>0) {
                            $("#card-columns").empty();
                            $.each(result.extend.list,function (index, item) {
                                if (item.title) {
                                    var div_card = $("<div class='card'></div>");
                                    var div_body = $("<div class='card-body'></div>");
                                    var h5 ;
                                    if (item.type === 1) {
                                        //blog
                                        h5= $("<h5 class='card-title'><a href='/blog/"+item.id+"' class='text-info' >"+item.title+"</a></h5>");
                                    }else {
                                        //question
                                        h5= $("<h5 class='card-title'><a href='/question/"+item.id+"' class='text-info' >"+item.title+"</a></h5>");
                                    }
                                    var p = $("<p class='card-text'>"+item.content.substr(0,200)+"</p>");
                                    div_card.append(div_body.append(h5).append(p)).appendTo($("#card-columns"));
                                }
                            })
                        }else{
                            toastr.info("没有搜索到任何内容，换个关键字试试吧！");
                        }
                    }else{
                        toastr.error("搜索失败，请重试!");
                    }
                }
            });
        }else{
            toastr.error("请输入要搜索的关键字！");
        }
    });
</script>

</body>

</html>
